<template>
  <el-row :gutter="0" class="content">
    <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
      <div class="grid-content bg-purple">
        <el-tree
          icon-class="none"
          :highlight-current="true"
          :data="data"
          :props="defaultProps"
          @node-click="handleNodeClick"
        />
      </div>
    </el-col>
    <el-col :xs="20" :sm="20" :md="20" :lg="20" :xl="20">
      <div class="grid-content bg-purple-light">
        <manage-board />
      </div>
    </el-col>
  </el-row>
</template>

<script>
import ManageBoard from './components/ManageBoard.vue'
export default {
  components: {
    ManageBoard
  },
  data() {
    return {
      tabPosition: 'left',
      data: [{
        label: '一级 1',
        id: 0
      }, {
        label: '一级 2',
        id: 2

      }, {
        label: '一级 3',
        id: 3

      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    handleNodeClick(data) {
      console.log(data)
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
    ::v-deep {
        .el-tree {
            background: #2F3242;
        }
        .el-tree-node {
            background: #2F3242;
            height: 50px;
            // margin-bottom: 10px;
            border-radius: 10px;
            color: #fff;
        }
        .el-tree-node__content{
            background: #2F3242;
            &:hover{
                background-color: #252735;
                opacity: 0.5;
                color: #21DEAC;
                border-radius: 8px;
            }
        }
        .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content{
            background:#252735;
            color: #21DEAC;
            border-radius: 8px;
        }
        .el-tree-node__content > .el-tree-node__expand-icon{
            padding: 0;
        }
        .el-tree-node__content {
            justify-content: center;
            height: 50px;
        }
        // .el-tree-node__content {
        //   background: red;
        // }
    }
}
.bg-purple {
    background: #2F3242;
    border: 1px solid #000;
    border-right: 1px solid red;
    padding: 5px;
  }
  .bg-purple-light {
    background: #e5e9f2;
    padding: 5px 15px;
  }
  .grid-content {
    // border-radius: 4px;
    min-height: calc(100vh - 143px);
    max-height: calc(100vh - 143px);

  }
</style>
